<template>
	<div class="gj-container">
		<div class="phonelistWrap">
			<div class="phonelist-content">
				<el-row class="panel-group el-row" :gutter="20">
					<el-col class="card-panel-col" :span="8">
						<div class="card-panel">
							<div class="card-panel-title-wrapper">
								<div class="panel-title-body">
									<div style="overflow:hidden;">
										<div class="panel-title-left">工单号</div>
										<div class="panel-title-right">产线: 14#加工机</div>
									</div>
									<div class="panel-title-code">WO202108200001</div>
								</div>
							</div>
							<div class="card-panel-description">
								<div class="card-panel-brandy">
									产品名称:
									<span>LSSG30-12′19 V0 754533</span>
								</div>
								<div class="card-panel-brandy">
									产品代码:
									<span>754533</span>
								</div>
							</div>
						</div>
					</el-col>
					<el-col class="card-panel-col" :span="16">
						<div class="card-panel">
							<div class="card-panel-wrapper">
								<div class="card-panel-left">
									<div class="card-panel-title">个装枚数</div>
									<div class="card-panel-title">N1成品箱数</div>
									<div class="card-panel-title">N2成品箱数</div>
								</div>
								<div class="card-panel-right">
									<div class="progress">
										<el-progress class="gcount" :text-inside="true" :stroke-width="30" :percentage="50" color="#51bdff"></el-progress>
										<div class="num">100000/200000</div>
									</div>
									<div class="progress">
										<el-progress class="n1count" :text-inside="true" :stroke-width="30" :percentage="45" color="#49d3ba"></el-progress>
										<div class="num">675/1500</div>
									</div>
									<div class="progress">
										<el-progress class="n2count" :text-inside="true" :stroke-width="30" :percentage="35" color="#f9bd77"></el-progress>
										<div class="num">350/1000</div>
									</div>
								</div>
							</div>
						</div>
					</el-col>
				</el-row>
				<div class="tableBox" style="max-height:340px;background:#fff;">
					<el-table :data="tableData" :row-class-name="tableRowClassName" max-height="300" min-height="290">
						<el-table-column prop="time" label="故障时间" align="center" show-overflow-tooltip></el-table-column>
						<el-table-column prop="errorName" label="故障内容" align="center"></el-table-column>
						<el-table-column prop="logName" label="故障类别选择" align="center"></el-table-column>
						<el-table-column prop="remarks" label="备注" align="center"></el-table-column>
						<el-table-column prop="timelength" label="时间(min)" align="center"></el-table-column>
					</el-table>
				</div>
				<!-- 时间轴 -->
				<div class="timeLine">
						<div class="time-line" style="width:100%;">
							<div :style="{width:(2.17*datelength)+'px'}" style="background:#5da2f0;height: 20px;border-radius: 10px;">
								<span :class="item.selected == true?(item.first?'selected firstEnd':'selected'):''" v-for="item in arr"></span>
							</div>
						</div>
						<div class="time-list">
							<span style="font-size:14px;width:4.07%;display: inline-block;" v-for="time in times">{{time}}</span>
						</div>
				</div>
				<!-- <div><span style="background:red;">sdsdf</span></div> -->
				<div class="menu">
					<ul class="menu-list">
						<li class="menu-info" @click="skipRouter('login')">
							<span>
								<img src="@/assets/img/menu_01.png" />
								<span class="menu-name">工单登录</span>
							</span>
						</li>
						<li class="menu-info" @click="skipRouter('/workOrder')">
							<span>
								<img src="@/assets/img/menu_02.png" />
								<span class="menu-name">工单查询</span>
							</span>
						</li>
						<li class="menu-info" @click="skipRouter('/workOrder')">
							<span>
								<img src="@/assets/img/menu_03.png" />
								<span class="menu-name">单据录入</span>
							</span>
						</li>
						<li class="menu-info" @click="skipRouter('/remnantWork')">
							<span>
								<img src="@/assets/img/menu_04.png" />
								<span class="menu-name">个装品残量</span>
							</span>
						</li>
						<li class="menu-info" @click="skipRouter('/workOrder')">
							<span>
								<img src="@/assets/img/menu_05.png" />
								<span class="menu-name">内装损耗</span>
							</span>
						</li>
						<li class="menu-info" @click="skipRouter('/workOrderClose')">
							<span>
								<img src="@/assets/img/menu_06.png" />
								<span class="menu-name">工单关闭</span>
							</span>
						</li>
						<li class="menu-info" @click="skipRouter('/remnantWork3')">
							<span>
								<img src="@/assets/img/menu_07.png" />
								<span class="menu-name">故障输入</span>
							</span>
						</li>
						<li class="menu-info" @click="skipRouter('/machine')">
							<span>
								<img src="@/assets/img/menu_08.png" />
								<span class="menu-name">加工机日报</span>
							</span>
						</li>
						<li class="menu-info" @click="skipRouter('/inMachine')">
							<span>
								<img src="@/assets/img/menu_09.png" />
								<span class="menu-name">内装机日报</span>
							</span>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import moment from 'moment';
var numArr = []
for(var i=0;i<60*12;i++){
	numArr.push({
		id:i+1,
		selected:false,
		first:false
	});
}
console.log(moment().format('h'))
var dateNum,hour;
if(moment().format('H').substr(0,1) == 0){
	hour = (moment().format('H').substr(1,1) - 8) *60 
}else{
	hour = (moment().format('H').substr(0,2) - 8) *60
};

dateNum = hour + parseInt(moment().format('m'));
console.log(parseInt(moment().format('m')))
export default {
	components: {},
	data() {
		return {
			datelength:dateNum, //当前时间
			arr:numArr,
			times:['8:00','8:30','9:00','9:30','10:00','10:30','11:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30','20:00'],
			selectedTime:[{start:'09:05',min:10},{start:'09:30',min:10}], //需要传递的值
			errorArr:[],
			userLoading: true,
			dialogVisible_user: false,
			dialogVisible_edit: false,
			//搜索数据
			searchConf: {
				customerName: '',
				businessName: '',
				projectName: ''
			},
			tableData: [
				{
					id: '1',
					time: '08:32',
					timelength: '40',
					errorName: '吸收体断料',
					logName: 'Z-2中央吸收纸',
					remarks: '胶带贴复位置偏高'
				},
				{
					id: '2',
					time: '10:40',
					timelength: '30',
					errorName: '吸收体断料',
					logName: 'Z-2中央吸收纸',
					remarks: '胶带贴复位置偏高'
				},
				{
					id: '3',
					time: '12:00',
					timelength: '20',
					errorName: '吸收体断料',
					logName: 'Z-2中央吸收纸',
					remarks: '胶带贴复位置偏高'
				},
				{
					id: '4',
					time: '14:23',
					timelength: '40',
					errorName: '吸收体断料',
					logName: 'Z-2中央吸收纸',
					remarks: '胶带贴复位置偏高'
				}
			]
		};
	},
	computed: {
		...mapGetters(['componentTitle'])
	},
	mounted() {
		this.selectedTime.map((item,index)=>{
			let min = ''
			if(item.start.substr(0,1) == 0){
				min = (item.start.substr(1,1) - 8) *60 
			}else{
				min = (item.start.substr(0,2) - 8) *60
			};
			this.errorArr.push({min:min + parseInt(item.start.substr(3,2)), max:min + parseInt(item.start.substr(3,2)) + item.min})
			
		})
		this.arr.map((item,index)=>{
			this.errorArr.map((current,j)=>{
				for(var i = current.min;i <= current.max;i++){
					if(item.id == i){
						if(item.id == current.min || item.id == current.max || item.id == current.min+1|| item.id == current.max-1 || item.id == current.min+2 || item.id == current.max-2){
							item.first = true
						}
						item.selected = true
					}
				}
			})
		})
	},
	methods: {
		tableRowClassName({ row, rowIndex }) {
			if (rowIndex % 2 == 1) {
				return 'gray-row';
			}
			return '';
		},
		skipRouter(path){
			if(path == 'login'){
				localStorage.clear()
				this.$router.push({ path: path});
			}else{
				this.$router.push({ path: '/system'+path })
			}
		}
	}
};
</script>
<style lang="scss">
.gcount {
	.el-progress-bar__outer {
		background-color: #dcf2ff;
		border-radius: 0px 100px 100px 0px !important;
		.el-progress-bar__inner {
			border-radius: 0px 100px 100px 0px !important;
			.el-progress-bar__innerText {
				position: absolute;
				top: 0px;
				color: #51bdff;
				font-size: 30px;
			}
		}
	}
}
.n1count {
	.el-progress-bar__outer {
		background-color: #dbf6f1;
		border-radius: 0px 100px 100px 0px !important;
		.el-progress-bar__inner {
			border-radius: 0px 100px 100px 0px !important;
			.el-progress-bar__innerText {
				position: absolute;
				top: 0px;
				color: #49d3ba;
				font-size: 30px;
			}
		}
	}
}
.n2count {
	.el-progress-bar__outer {
		background-color: #fef2e4;
		border-radius: 0px 100px 100px 0px !important;
		.el-progress-bar__inner {
			border-radius: 0px 100px 100px 0px !important;
			.el-progress-bar__innerText {
				position: absolute;
				top: 0px;
				color: #f9bd77;
				font-size: 30px;
			}
		}
	}
}
.el-table .gray-row {
	background: #f7f8f9;
}
</style>
<style lang="scss" scoped>
.panel-group {
	margin-left: 20px;
	margin-bottom: 20px;
	.card-panel {
		position: relative;
		overflow: hidden;
		color: #666;
		background: #fff;
		-webkit-box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
		box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
		border-color: rgba(0, 0, 0, 0.05);
		border-radius: 20px;
		.card-panel-title-wrapper {
			background: url(../../../assets/img/cardBg.png) 0 0 no-repeat;
			width: 100%;
			height: 150px;
			background-size: cover;
			.panel-title-body {
				padding: 20px;
				overflow: hidden;
				.panel-title-left {
					float: left;
					background: #f9f9f9;
					border-radius: 28px 28px 28px 0;
					padding: 10px 20px;
					font-size: 20px;
				}
				.panel-title-right {
					float: right;
					color: #fff;
					margin-top: 6px;
				}
				.panel-title-code {
					font-size: 42px;
					color: #fff;
					margin-top: 10px;
				}
			}
		}
		.card-panel-description {
			padding: 30px;
			.card-panel-brandy {
				color: #666666;
				span {
					color: #000000;
				}
			}
			.card-panel-brandy:nth-child(2) {
				margin-top: 20px;
			}
		}
		.card-panel-wrapper {
			padding: 30px 60px;
			font-size: 26px;
			color: #000;
			height: 302px;
			.card-panel-left {
				margin-top: 30px;
				line-height: 65px;
				border-right: solid 2px #d5e2fd;
				padding-right: 20px;
				float: left;
				.card-panel-title{
					overflow:hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					vertical-align: middle;
					max-width:140px;
				}
			}
			.card-panel-right {
				float: left;
				width: 80%;
				line-height: 100px;
				margin-left: 20px;
				margin-top: 50px;
				.progress {
					width: 100%;
					overflow: hidden;
					.gcount {
						float: left;
						width: 75%;
					}
					.n1count {
						float: left;
						width: 75%;
					}
					.n2count {
						float: left;
						width: 75%;
					}
					.num {
						position: relative;
						float: right;
						margin-top: -35px;
						margin-left: -23px;
						z-indx: 99999;
					}
				}
			}
		}
	}
}
.timeLine{
	margin-top:30px;
	width:100%;
	.time-line{
		background:#e7eff8;
		height:20px;
		border-radius:10px;
		span{
			width:2.67px;
			display:inline-block;
			position: relative;
			z-index: 999;
			vertical-align: top;
			
		}
	}
	.time-list {
		color:#000;
		text-align:left;
		span:nth-child(1){
			text-align:left;
		}
		span:nth-child(25){
			text-align:right;
			width:auto !important;
		}
	}
}
.menu-list {
	margin-top:40px;
	overflow: hidden;
	list-style: none;
	padding: 0 !important;
	border-radius: 4px;
	line-height: 2em;
	.menu-info {
		float: left;
		width: 11.11%;
		text-align: center;
		height: 160px;
		margin:0 auto;
		img {
			display: block;
			margin-bottom: 15px;
			width:100px;
			margin:0 auto;
		}
		.menu-name {
			display: inline-block;
			padding: 0 3px;
			color: #000;
			font-size: 24px;
			margin-top:5px;
		}
	}
}
.tableBox{
	border-radius:20px;
}
.selected{
	background:#ff9b8e;
	height:20px;
	border:none;
	outline: none;
	line-height:20px;
}
.firstEnd{
	height:30px;
	line-height:30px;
	height:30px;
	margin-top:-6px;
	background:#ff715f;
	border-radius:50%;
}
</style>
